
<template>
  <div id="app">
    <div class="nvobox">
      <el-container class="layout-container-demo" style="height: 100%">
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu :default-active="active" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
              <template v-for="(item, index) in menuList" :key="index">
                <el-menu-item :index="item.index" v-if="!item.children" @click="goToAbout(item)">
                  <el-icon>
                    <icon-menu />
                  </el-icon>
                  <span>{{ item.text }}</span>
                </el-menu-item>

                <el-sub-menu :index="item.index" v-else>
                  <template #title>
                    <el-icon>
                      <location />
                    </el-icon>
                    <span>{{ item.text }}</span>
                  </template>
                  <el-menu-item-group title="Group One">
                    <el-menu-item v-for="(itx, inx) in item.children" :key="inx" :index="itx.index" @click="goToAbout(itx)">{{
                      itx.text
                    }}</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
              </template>
            </el-menu>
          </el-scrollbar>
        </el-aside>
      </el-container>
    </div>

    <div class="box">
      <div class="top">
        <el-breadcrumb separator="/">
          <template v-for="(item, index) in arr" :key="index">
            <el-breadcrumb-item v-if="index == 0" :to="{ path: '/' }" @click="goToAbout(item)">{{
              item.text
            }}</el-breadcrumb-item>
            <el-breadcrumb-item v-if="index != 0">{{ item.text }}</el-breadcrumb-item>
          </template>
        </el-breadcrumb>
      </div>
      <div class="content">
        <RouterView />
      </div>
    </div>
  </div>
</template>
<script setup>
import { RouterView } from 'vue-router'
import { ref, reactive, onMounted } from 'vue'
import menuList from './views/menu'
import { useRouter } from 'vue-router' // 引入useRouter函数
const active = ref('0')
const router = useRouter() // 使用useRouter函数获取router实例
const arr = ref([{ text: '首页', path: '/', index: '0' }])
const goToAbout = (itx) => {
  console.log(57, itx)
  active.value = itx.index
  router.push({ path: itx.path }) // 使用name进行跳转或者使用path: '/about'来直接指定路径
  arr.value = []
  myMenuList.value.map((item) => {
    //首页
    if (item.index == itx.index) {
      arr.value.push(item)
    }
    //其他
    item.children
      ? item.children.map((itam) => {
          if (itx.index == itam.index) {
            arr.value.push(myMenuList.value[0])
            arr.value.push(item)
            arr.value.push(itam)
          }
        })
      : ''
  })
  console.log(64, arr.value)
}
const myMenuList = ref([])
onMounted(() => {
  myMenuList.value = menuList
  console.log(6, myMenuList)
})
</script>
<style lang="scss" scoped>
#app {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  .nvobox {
    width: 200px;
    height: 100%;
    box-sizing: border-box;
  }
  .box {
    width: calc(100vw - 201px);
    height: 100%;
    box-sizing: border-box;
    border: 1px solid gainsboro;
    .top {
      width: 100%;
      height: 36px;
      border: none;
      padding: 10px 20px;
      box-sizing: border-box;
    }
    .content {
      width: 100%;
      height: calc(100% - 36px);
    }
  }
}
layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.el-sub-menu__title {
}
:deep .el-container {
  // border: 1px solid gainsboro;
  .el-aside {
    background: #fff !important;
  }
}
.el-menu-item.is-active {
  color: #fff !important;
  background: rgb(49, 120, 212);
}
:deep .el-menu-item-group__title {
  display: none;
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
